<template>
  <el-container>
    <el-header algin="center">{{ title }}</el-header>
    <el-container>
      <el-aside width="150">
        <div class="m-title"><i class="el-icon-warning-outline"></i>区域列表</div>
        <ul class="menu">
          <li v-for="item in data" :key="item.id">
            <a class="aa" href="javascript:void(0);" @click="nodeClick(item)">{{
              item.regionName }} </a>
          </li>
        </ul>
      </el-aside>
      <el-main style="border: 1px solid #eee">
        <el-row :gutter="20" class="row" type="flex" v-for="row in locationData" :key="row.key">
          <el-col v-for="col in row.cols" :key="col.id" :span="span" :offset="col.offset * span">
            <el-popover placement="bottom-start" :width="300" trigger="hover">
              <template #reference>
                <div :class="getClass(col)" >
                  <div class="son"> {{ col.slName }}
                  {{ col.materialBoxNo }} <br/> {{ col.materialName }}  {{ col.materialWeight }}
                  <span v-show="col.materialBoxNo">KG</span>
                </div>                  
                </div>
              </template>
              <el-descriptions v-if="col.materialBoxNo" title="料箱信息" :column="1" style="font: bold;">
                <el-descriptions-item label="计划单号">{{ col.orderNumber }}</el-descriptions-item>
                <el-descriptions-item label="物料名称">{{ col.materialName }}</el-descriptions-item>
                <el-descriptions-item label="物料批号">
                  <el-tag  style="color: red; font: bold;">{{ col.batchNumber }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="物料库存">
                  <el-tag size="small">{{ col.materialWeight }}KG</el-tag>
                </el-descriptions-item>
              </el-descriptions>
              <el-descriptions v-else title="料箱信息" :column="1" style="font: bold;">                
                <el-descriptions-item label="当前位置未绑定料箱"></el-descriptions-item>
              </el-descriptions>

            </el-popover>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
export default {
  data() {
    return {
      visible: false,
      currentRow: {
        orderNumber: "",
        materialName: "",
        batchNumber: "",
        materialWeight: ""
      },
      currentBoxNo :"",
      title: "",
      checked: false,
      span: 5,
      data: [],
      locationData: [],
      defaultProps: {
        children: 'children',
        label: 'regionName'
      }
    };
  },
  created() {
    this.load();
  },
  components: {
  },
  created() {
    //初始化一个对象全局缓存起来，当点击左边树形菜单时，把点击菜单的treeId(角色id)存到treeDemo1里
    this.load();
  },
  methods: {
    hide() {
      this.currentRow = {
        orderNumber: "",
        materialName: "",
        batchNumber: "",
        materialWeight: ""
      }
    },
    showBoxInfo(row) {
        this.hide();
       this.currentBoxNo = row.materialBoxNo;
      if(!row.materialBoxNo){
        return ;
      }
      this.http.get(`/api/StagingArea/GetBoxStock/${row.materialBoxNo}`, {}, false).then((result) => {
        if (!result.status) return this.$message.error(result.message);
        this.currentRow = result.data;
      });
    },
    getClass(col) {
      if (col.isOccupy || col.materialBoxNo)
        return "grid-content bg-red";
      if (col.enable)
        return "grid-content bg-purple";
      return "grid-content bg-dark";
    },
    load() {
      this.http.get("/api/StagingArea/GetStagingAreas", {}, true).then((result) => {
        if (!result.status) return this.$message.error(result.message);
        this.data.splice(0);
        this.data = result.data;
        if (this.data && this.data.length > 0)
          this.nodeClick(this.data[0]);
      });
    },
    nodeClick(node) {
      //调用table(viewGird.vue)刷新方法
      this.title = node.regionName;
      this.http.get(`/api/StagingArea/GetLocationData/${node.id}`, null, true).then((result) => {
        if (!result.data)
          return;
        this.locationData = result.data.result;
        this.span = result.data.span;
      });
    }
  }
};
</script>
  
<style lang="less" scoped>
.menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu li {
  background-color: #fffefd;
  //padding: 10px;
  border-bottom: 1px solid #fae2e2;
  height: 50px;
  line-height: 50px;
  font-size: larger;
}

.menu li:hover {
  background-color: #ccc;
}

.menu ul li {
  background-color: #e21212;
  //padding: 5px;
}

.menu ul li:hover {
  background-color: #aaa;
}

.menu ul ul li {
  background-color: #d0d0d0;
  padding: 2px;
}

a {
  display: block;
  line-height: 50px;
}


.m-title {
  line-height: 40px;
  font-size: 15px;
  background: #66b1ff0f;
  font-weight: bold;
  padding: 6px 16px;
  border: 1px solid #ececec;

  i {
    padding-right: 5px;
  }
}

.el-header {
  background: linear-gradient(to right, hsla(0, 0%, 100%, 0.5), #d1f3e3);
  //background-color: #d1f3e3;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  color: #333;
  text-align: center;
  line-height: 135px;
}

.bg-dark {
  background: #99a9bf;
}

.bg-purple {
  background: skyblue;
}

.bg-red {
  background: rgb(243, 130, 130);
}

.grid-content {
  border-radius: 10px;
  height: 150px;
  //min-width: 200px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
  perspective: 1000px;
  transform-style: preserve-3d;
}

.grid-content:hover {
  box-shadow: 10px 10px 10px #888888;
  cursor: pointer;
  font-size: 24px;
  font-weight: bold;
  //background: linear-gradient(to right,hsla(0, 0%, 100%, 0.5),#ff00cc);
  background-image: radial-gradient(ellipse at center, white 2%, transparent 95%);
  color: red;
  
}
.son{
    display:inline-block;
    vertical-align: middle;
    line-height:30px;
    text-align: center;
  }

.el-main {
  height: 100%;
}

.row {
  height: 100%;
  margin-top: 10px;
  margin-bottom: 20px;
}
</style>
  